<button data-title="选择商品" data-iframe="{:url('selectGoods')}?refund_id={$value}" type="button" class="layui-btn layui-btn-danger">{$label}</button>
<table class="layui-table" lay-size="sm" lay-skin="line">
    <thead>
    <tr>
        <th class='text-left nowrap'>商品LOGO</th>
        <th class='text-left nowrap'>商品名称</th>
        <th class='text-left nowrap'>商品价格</th>
        <th class='text-left nowrap'>数量</th>
        <th class='text-left nowrap'>操作</th>
    </tr>
    </thead>
    <tbody id="selectGoods">
    {volist name="goodsArr" id="goods"}
    <tr class="data-line">
        <td class='text-left nowrap'>
            <img src="{$goods.logo}" width="80" height="80">
        </td>
        <td class='text-left nowrap'>
            {$goods.title}
        </td>
        <td class='text-left nowrap good_price'>
            {$goods.price}
        </td>
        <td class='text-left nowrap'>
            <div class="good_num">
                <span class="fa fa-plus-square-o fa-3x num_add"></span>
                <input style="width: 50px; margin: 0 20px;" type="number" autofocus required name="num[]" value='1' title="请输入数量" placeholder="请输入数量" class="layui-input spec_num">
                <span class="fa fa-minus-square-o fa-3x num_reduce"></span>
            </div>
        </td>
        <td class='text-left nowrap'>
            <button  type="button" class="layui-btn layui-btn-sm layui-btn-danger removeGood" value="{$goods.id}">移除</button>
        </td>
    </tr>
    {/volist}
    <tr class="total">
       <td colspan="2">总计：</td>
        <td id="total_goods_price">0.00</td>
        <td colspan="2"></td>
    </tr>
    </tbody>
</table>
<style>
    .good_num{
        display: flex;
    }
</style>
<script>
    let total_price = 0;
    count_price();
    function count_price(){
        $(".data-line").each(function (){
            let good_price = $(this).children('.good_price').text();
            let good_num = $(this).find('.spec_num').val();
            total_price += good_price*good_num;
        });
        if (total_price){
            $("#total_goods_price").text(total_price.toFixed(2));
        }else{
            $("#total_goods_price").text('0.00');
        }
    }
    $('.removeGood').click(function () {
        var that = this;
        $.post("{:url('removeGood')}",{good_id:$(this).val()},function(data,status){
            if(data.code == 1){
                $(that).parent().parent('tr').remove();
                total_price = 0;
                count_price();
            }
        });
    })

    $("input[name='num[]']").blur(function () {
        total_price = 0;
        count_price();
    })

    $(".num_add").click(function () {
        let node = $(this).siblings('input');
        let num = node.val();
        num++;
        node.val(num);
        total_price = 0;
        count_price();
    })

    $(".num_reduce").click(function () {
        let node = $(this).siblings('input');
        let num = node.val();
        num--;
        if (num > 0){
            node.val(num);
            total_price = 0;
            count_price();
        }
    })
</script>